import wsAPI from "@/app/[language]/site/lib/wsAPI"; import { useSiteStore } from "@/state/Stores"; import CryptoJS from "crypto-js"; import { observer } from "mobx-react-lite"; import { useTranslations } from "next-intl"; import { useState } from "react"; import { Button, Col, Form, Input, Modal, Row } from "reactstrap"; const EventPB = require("@/Event_pb"); export default observer(() => { const { isLogInOpened, setLogInOpened } = useSiteStore(); const t = useTranslations(); const [avatarID, setAvatarID] = useState(""); const [avatarCipher, setAvatarCipher] = useState(""); const [autoLogIn, setAutoLogIn] = useState(false); const onLogIn = () => { if (autoLogIn) { window.localStorage.setItem("avatarID", avatarID); window.localStorage.setItem( "avatarCipher", CryptoJS.AES.encrypt( avatarCipher, "591A6F91-2A27-4A88-88FA-0FEB7CB5FD94", ).toString(), ); } window.localStorage.setItem("autoLogIn", autoLogIn.toString()); wsAPI.send({ eventID: EventPB.Event.EventID.LOG_IN, text: JSON.stringify({ avatarID, avatarCipher }), }); }; return ( <Modal isOpen={isLogInOpened} toggle={() => setLogInOpened(false)} centered> <Form> <Row className="g-0"> <Col className="m-1"> <Input value={avatarID} onChange={({ target: { value } }) => { setAvatarID(value); }} placeholder={t("logInID")} /> </Col> </Row> <Row className="g-0"> <Col className="m-1"> <Input autoComplete="off" value={avatarCipher} onChange={({ target: { value } }) => { setAvatarCipher(value); }} type="password" placeholder={t("logInCipher")} onKeyDown={({ key }) => { if (key === "Enter") { onLogIn(); } }} /> </Col> </Row> <Row className="justify-content-center g-0"> <Col className="m-1" xs="auto"> <Button color="success" onClick={onLogIn}> {t("logIn")} </Button> </Col> <Col className="m-1" xs="auto"> <Button color={autoLogIn ? "success" : "danger"} onClick={() => { setAutoLogIn((prevState) => !prevState); }} > {t("autoLogIn")} </Button> </Col> </Row> </Form> </Modal> ); });